<script setup lang="ts">
import { onMounted, reactive } from "vue";

const timers = reactive({
  hours: "",
  minutes: "",
  seconds: "",
});

onMounted(() => {
  setInterval(() => {
    const currentDate = new Date();
    timers.hours = `${currentDate.getHours()}`.padStart(2, "0");
    timers.minutes = `${currentDate.getMinutes()}`.padStart(2, "0");
    timers.seconds = `${currentDate.getSeconds()}`.padStart(2, "0");
  }, 1000);
});
</script>

<template>
  <div class="home-left">
    <div style="height: 400px">
      <div class="side-card">
        <div class="introduce-card">
          <div class="introduce-card_time">
            <div class="fs-timer">
              <img src="http://pic.fasyncsy.com.cn/coverPic/bg2.jpg" />
              <div class="fs-timer-item timer1">
                <p>{{ timers.hours }}</p>
                <span>hours</span>
              </div>
              <b class="fen">:</b>
              <div class="fs-timer-item timer2">
                <p>{{ timers.minutes }}</p>
                <span>minutes</span>
              </div>
              <b class="fen">:</b>
              <div class="fs-timer-item timer3">
                <p>{{ timers.seconds }}</p>
                <span>seconds</span>
              </div>
            </div>
          </div>
          <div class="introduce-card_content">
            <b>F's Blog</b>
            <p>
              这里是一位热爱前端开发和单机游戏的普本在校生，喜欢折腾一些界面和界面数据交互~
            </p>
            <p>
              该站点主要记录自己的学习历程，分享自己总结知识点，时不时也会在这里分享一些生活趣事。
            </p>
          </div>
          <div class="introduce-card_count">
            <div class="count-item"><b>文章</b><span>30</span></div>
            <div class="count-item"><b>分类</b><span>6</span></div>
            <div class="count-item"><b>标签</b><span>33</span></div>
            <div class="count-item"><b>留言</b><span>17</span></div>
          </div>
        </div>
      </div>
      <div class="side-card">
        <div class="fs-side-card" style="--5a51251e: 10px">
          <div class="fs-side-card_titleBox">
            <div class="title">推荐外文</div>
          </div>
          <div class="fs-side-card_content">
            <ul class="ul">
              <li
                class="out-article-item"
                style="
                  transform: translateX(0px);
                  transition: all 0.25s ease 0s;
                "
              >
                <span class="out-article-item_ranking">1</span
                ><span class="out-article-item_title"
                  ><a
                    href="https://juejin.cn/post/7086735198942920712"
                    target="_blank"
                    class="adress"
                    >如何把前端项目写成一座屎山？</a
                  ></span
                >
              </li>
              <li
                class="out-article-item"
                style="
                  transform: translateX(0px);
                  transition: all 0.25s ease 0.25s;
                "
              >
                <span class="out-article-item_ranking">2</span
                ><span class="out-article-item_title"
                  ><a
                    href="https://leetcode.cn/circle/discuss/lVYYft/"
                    target="_blank"
                    class="adress"
                    >面试经验｜努力学计算机四年，终于进腾讯了！</a
                  ></span
                >
              </li>
              <li
                class="out-article-item"
                style="
                  transform: translateX(0px);
                  transition: all 0.25s ease 0.5s;
                "
              >
                <span class="out-article-item_ranking">3</span
                ><span class="out-article-item_title"
                  ><a
                    href="https://juejin.cn/post/7195327225669877821"
                    target="_blank"
                    class="adress"
                    >Vue: 掌握2.x和3.x响应式原理赚到了一杯奶茶^o^</a
                  ></span
                >
              </li>
              <li
                class="out-article-item"
                style="
                  transform: translateX(0px);
                  transition: all 0.25s ease 0.75s;
                "
              >
                <span class="out-article-item_ranking">4</span
                ><span class="out-article-item_title"
                  ><a
                    href="https://juejin.cn/post/7195770707325632571"
                    target="_blank"
                    class="adress"
                    >浅谈前端天花板</a
                  ></span
                >
              </li>
              <li
                class="out-article-item"
                style="
                  transform: translateX(0px);
                  transition: all 0.25s ease 1s;
                "
              >
                <span class="out-article-item_ranking">5</span
                ><span class="out-article-item_title"
                  ><a
                    href="https://juejin.cn/post/7195486276936532028"
                    target="_blank"
                    class="adress"
                    >一起来聊一聊，vue3 的心智负担真的比 react 低吗？</a
                  ></span
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-left {
  width: 250px;
  position: sticky;
  top: -20vh;
  height: 400px;
  margin-top: 2%;
  margin-left: 50px;

  .side-card {
    margin-bottom: 20px;
    overflow: hidden;

    .introduce-card {
      border-radius: 10px;
      background-color: #fff;
      overflow: hidden;
      box-shadow: 1px 0 6px #0000000a;

      .introduce-card_time {
        .fs-timer {
          position: relative;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          width: 100%;
          height: 120px;
          overflow: hidden;
          cursor: pointer;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 0.6s;
          }

          .fen {
            position: relative;
            font-size: 30px;
            color: #fff;
            width: 16px;
            height: 55px;
            text-shadow: 0.8px 0 5px #333;
            text-align: center;
          }

          .fs-timer-item {
            width: 50px;
            height: 70px;
            color: #fff;
            position: relative;
            top: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            p {
              font-size: 40px;
              margin: 0;
              text-shadow: 0.8px 0 5px #333;
            }
          }

          .timer1,
          .timer2,
          .timer3 {
            animation: 0.4s timerTransition ease forwards;
          }
        }
      }

      .introduce-card_content {
        padding: 10px;
      }

      .introduce-card_count {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #eee;

        .count-item {
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          height: 55px;
        }
      }
    }

    .fs-side-card {
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 1px 0 6px #0000000a;
      padding: var(--5a51251e);

      .fs-side-card_titleBox {
        position: relative;
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #e9f0fc;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-size: 18px;
          line-height: 40px;
          color: #777;
        }
      }

      .fs-side-card_content {
        height: 100%;
        margin-top: 10px;
        padding-right: 5px;

        .ul {
          margin: 0;
          padding: 0;
          list-style: none;

          .out-article-item {
            margin-bottom: 5px;
            width: 100%;
            // background-color: #f6f6f6;
            display: flex;

            .out-article-item_ranking {
              // float: left;
              display: block;
              width: 18px;
              height: 18px;
              text-align: center;
              line-height: 20px;
              margin-right: 10px;
              background-color: #07d9d7;
              color: #fff;
            }

            .out-article-item_title {
              flex: 1;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              a {
                text-decoration: none;
                color: #000;
                // padding: 10px;
                // overflow: hidden; /* 隐藏超出部分 */
                // white-space: nowrap; /* 文字在一行内显示 */
                // text-overflow: ellipsis; /* 超出部分显示省略号 */
              }
            }
          }
        }
      }
    }
  }
}
</style>
